<template>
  <view :item="item" class="article-item">
    <view class="words">
      <view style="width: 89.6vw; display: flex; justify-content: space-between; margin-bottom: 1vw">
        <text style="font-size: 5.2vw; color: black; font-weight: 560">{{ item.title }}</text>
        <text style="width: 9.2vw; height: 4.4vw; border-radius: 2.2vw; font-size: 2.8vw; color: white; background-color: red; line-height: 4.4vw; text-align: center">热门</text>
      </view>

      <view style="width: 89.6vw; display: flex; justify-content: space-between">
        <text style="width: 59.2vw; font-size: 3.6vw; color: #d5d5d5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          {{ item.description }}
        </text>
        <view style="display: flex; align-items: start">
          <up-icon name="download" color="#d5d5d5" size="20"></up-icon>
          <text style="font-size: 3.2vw; color: #d5d5d5; align-self: center">{{ item.downloadTime }}</text>
        </view>
      </view>
    </view>
    <view class="pictures">
      <scroll-view scroll-x="true" style="width: 94.8vw; overflow: scroll-x; white-space: nowrap; padding-left: 0; margin-left: 0">
        <image v-for="(item, index) in item.imgUrlList" :key="index" :src="item" class="imgSet" mode="top"></image>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({
      title: '默认标题',
      type: '热门',
      description: '未知作者',
      downloadTime: 0,
      imgUrlList: []
    })
  }
});
</script>

<style lang="scss" scoped>
.article-item {
  width: 94.8vw;
  height: 82vw;
  margin-bottom: 5.2vw;
  .words {
    width: 89.6vw;
    margin-right: 5.2vw;
  }
  .pictures {
    width: 94.8vw;
    height: 74.8vw;
    margin-top: 5.2vw;
    .imgSet {
      width: 36.8vw;
      height: 64vw;
      margin-right: 1vw;
    }
  }
}
</style>
